<template>
	<view class="container">
		<view class="cellGroup">
			<view class="title">旅游卡</view>
			<view class="cell b-b">
				<text class="tit">卡号</text>
				<input type="text" :disabled="disabled" v-model="cardno" placeholder="请输入卡号" placeholder-class="grey" />
			</view>
			<view class="cell">
				<text class="tit">卡密</text>
				<input type="text" :disabled="disabled" :password="passwordShow" v-model="pswd" placeholder="请输入卡密码" placeholder-class="grey" />
				<uni-icons class="eyes" type="eye" size="20" color="#bbb" @tap="eyecheck('hide')" v-if="eyeStyle == 'show'"></uni-icons>
				<uni-icons class="eyes" type="eye-slash-filled" color="#bbb" size="20" @tap="eyecheck('show')" v-else></uni-icons>
			</view>
		</view>
		<view class="cellGroup">
			<view class="title">用户信息</view>
			<view class="cell b-b">
				<text class="tit">姓名</text>
				<input type="text" v-model="realname" placeholder="请输入姓名" placeholder-class="grey" />
			</view>
			<view class="cell b-b">
				<text class="tit">性别</text>
				<view class="uni-list">
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio style="transform:scale(0.8)" :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="cell b-b">
				<text class="tit">身份证</text>
				<input type="text" v-model="idcardno" placeholder="请输入身份证号码" placeholder-class="grey" />
			</view>
			<view class="cell b-b">
				<text class="tit">手机号</text>
				<input type="text" v-model="tel" placeholder="请输入手机号码" placeholder-class="grey" />
			</view>
			<view class="cell">
				<text class="tit">验证码</text>
				<input type="text" v-model="captcha" placeholder="请输入验证码" placeholder-class="grey" />
				<text class="veri" v-if="isCheck" @tap="yzm()">获取验证码</text>
				<text class="ver" v-else>{{ time }}秒后可再次获取</text>
			</view>
		</view>
		<view class="btn" @tap="submit">确认</view>
	</view>
</template>

<script>
	import {
		registerVerify,
		travelScenicBindCard
	} from "@/api/user.js";
	export default {
		data() {
			return {
				eyeStyle: "hide",
				passwordShow: true,
				current: 0,
				disabled: true,
				isCheck: true,
				time: 60,
				cardno: "",
				pswd: "",
				realname: "",
				idcardno: "",
				sex: "1",
				tel: "",
				captcha: "",
				items: [
					{
						name: "男",
						value: "1"
					},
					{
						name: "女",
						value: "0"
					}
				]
			};
		},
		onLoad(options) {
			if (options.item) {
				let item = JSON.parse(decodeURIComponent(options.item))
				this.cardno = item.card_number
				this.pswd = item.pswd
				this.disabled = true
			}

		},
		methods: {
			eyecheck(type) {
				this.eyeStyle = type
				this.passwordShow = !this.passwordShow
			},
			radioChange(e) {
				this.sex = e.detail.value
			},
			yzm() {
				let _self = this;
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_self.tel)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					});
					return false;
				}
				uni.showLoading({
					mask: true
				})
				registerVerify({
					phone: _self.tel,
					type: "bind_travel_card"
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: res.msg
					});
					_self.isCheck = false;
					_self.countdown();
				})
			},
			countdown() {
				let _self = this;
				if (_self.time == 0) {
					_self.isCheck = true;
					_self.time = 60;
				} else {
					_self.time--;
					setTimeout(_self.countdown, 1000);
				}
			},
			submit() {
				uni.showLoading({
					mask:true
				})
				travelScenicBindCard({
					cardno: this.cardno,
					pswd: this.pswd,
					realname: this.realname,
					idcardno: this.idcardno,
					sex: this.sex,
					tel: this.tel,
					captcha: this.captcha,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:"绑定成功",
						duration:600
					})
					setTimeout(function() {
						uni.navigateBack({
							
						})
					},600)
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.grey {
		font-weight: normal;
		color: #ccc;
	}

	.container {
		padding-bottom: 70rpx;

		.cellGroup {
			background-color: #fff;

			.title {
				padding: 0 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #FAFAFA;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.cell {
				margin: 0 30rpx;
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				.eyes{
					position: absolute;
					right: 0;
					height: 100rpx;
					font-weight: normal;
					width: 100rpx;
					line-height: 100rpx;
				}
				.tit {
					height: 100rpx;
					line-height: 100rpx;
					min-width: 130rpx;
					width: 130rpx;
				}
				.uni-list{
					display: flex;
					align-items: center;
				}
				.uni-list-cell{
					float: left;
					margin-right: 60rpx;
					display: flex;
				}

				input {
					width: 460rpx;
					height: 100rpx;
					line-height: 100rpx;
				}

				.veri {
					position: absolute;
					right: 0;
					top: 20rpx;
					font-size: 28rpx;
					color: #2699F0;
					padding: 10rpx 26rpx;
					border: 2rpx solid #2699F0;
					border-radius: 50rpx;
					font-weight: normal;
				}

				.ver {
					font-weight: normal;
					position: absolute;
					right: 0;
					top: 32rpx;
					font-size: 24rpx;
					color: #bbb;
					padding: 2rpx 10rpx;
				}
			}

			.b-b {
				border-bottom: 1rpx solid #eee;
			}
		}

		.btn {
			margin: 150rpx auto 0;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
